<template>
  <div class="Project">
    <header-nav></header-nav>
    <main class="main-container">
      <div class="banner">
        <img src="../../static/images/banner.jpg" alt="banner">
      </div>
      <div class="project-container">
        <div class="project-box clearfix">
          <div class="project-title">
            <img src="../../static/images/project.png" alt="project">
            <strong>项目一</strong>
          </div>
          <div class="detail">这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况,这个项目是一个伟大的项目，它用于</div>
        </div>
        <div class="project-box clearfix" v-for="(item, index) in 5" :key="index">
          <div class="project-title">
            <img src="../../static/images/project.png" alt="project">
            <strong>项目一</strong>
          </div>
          <div class="detail">
            这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况,这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况
            这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况这个项目是一个伟大的项目，它用于检测全国精神病患者的生活情况
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import headerNav from "@/components/header-nav";
export default {
  name: "Project",
  components: {
    "header-nav": headerNav
  },
    mounted(){
      this.$store.commit("changeIndex", 1);
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/css/base.scss";
.main-container {
  background-color: #f4f4f4;
}
.banner {
  height: 285px;
}
.banner img {
  width: 100%;
}
.project-container {
  position: relative;
  padding: 30px;
  box-sizing: border-box;
  .project-box {
    position: relative;
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    .project-title {
      position: absolute;
      float: left;
      top: 50%;
      margin-top: -25px;
      height: 50px;
      img {
        height: 50px;
        vertical-align: middle;
        width: 50px;
      }
      strong {
        margin-left: 10px;
        vertical-align: middle;
        font-size: 20px;
      }
    }
    .detail {
      text-indent: 2em;
      margin-left: 10px;
      float: right;
      font-size: 18px;
      line-height: 26px;
      color: #666;
      width: 85%;
    }
  }
}
@media (max-width: 1024px) {
  .project-title {
    position: static !important;
    top: 0 !important;
    margin-top: -20px !important;
    height: 40px !important;
    margin: 0 0 10px 0 !important;
    img {
      height: 40px !important;
      width: 40px !important;
    }
    strong {
      font-size: 18px !important;
    }
  }
  .detail {
    font-size: 16px !important;
    width: 100% !important;
  }
}
@media (max-width: 750px) {
  .project-title {
    height: ptr(30px) !important;
    img {
      height: ptr(30px) !important;
      width: ptr(30px) !important;
    }
    strong {
      font-size: ptr(16px) !important;
    }
  }
  .detail {
    line-height: ptr(26px) !important;
    font-size: ptr(14px) !important;
  }
}
</style>
